<template>
  <div>
    <div class="container-fluid mt-3">
      <div class="card">

        <div class="card-body" v-for="(item, index) in orderList" v-bind:key="index">
          <div class="row">
            <span class="border border-success text-success col-2 ml-4 rounded btn-sm" >堂食</span>
            <h5 align="center" class="col-8 mt-2">福州闽侯马保证荣店</h5></div>
          <hr>
          <div class="m-0 p-0 form-inline" style="color: #666">
            <div class="col-3 m-0 p-0" align="left">订单编号：</div>
            <div class="col-9 m-0" align="right">{{ item.orderNo }}</div>

            <div class="col-3 m-0 p-0 mt-1" align="left">餐桌号码：</div>
            <div class="col-9 m-0 mt-1" align="right">{{ item.seatId }}</div>

            <div class="col-3 m-0 p-0 mt-1" align="left">支付金额：</div>
            <div class="col-9 m-0 mt-1" align="right">￥{{ item.payPrice }}</div>

            <div class="col-3 m-0 p-0 mt-1" align="left">支付方式：</div>
            <div class="col-9 m-0 mt-1" align="right" >线下支付</div>

            <div class="col-3 m-0 p-0 mt-1" align="left">下单时间：</div>
            <div class="col-9 m-0 mt-1" align="right" >{{ item.createTime | dateFormat }}</div>
          </div>
          <hr>

          <div class="pull-right">
            <b-button variant="light" class="mt-1  border" id="font" v-on:click="routerDetail(item.id)">查看明细</b-button>
          </div>


        </div>
      </div>
    </div>


    <div>
      <BottomNavigation></BottomNavigation>
    </div>


  </div>
</template>

<script>
import service from "../utils/axios";
export default {
  name: "OrderList",
  data(){
    return{
      orderList: {}
    }
  },
  filters: {
    dateFormat: function(value){

      var time = new Date(parseInt(value) * 1000)/*.toLocaleString()*//*.replace(/:\d{1,2}$/,' ')*/;
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      m = m > 9 ? m : '0' + m;
      return y+'-'+m+'-'+d+' '+h+':'+mm+':'+s;
      /*return new Date(parseInt(value) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');*/
    }
  },
  methods: {
    queryList: function (){
      service.get("/order/queryList").then(data => {
        this.orderList = data.data.data
      })
    },
    routerDetail: function (id){
      this.$router.push({
        name: "OrderDetails",
        params: {
          id:id
        }
      })
    }
  },
  created() {
    this.queryList()
  }
}
</script>

<style scoped>

#font{
  font-weight: 500;

}

</style>
